<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="">
<meta name="description" content="mezz">
<meta name="author" content="mezz">
<link href="./css/css.css" rel="stylesheet">
<link href="./css/chosen.css" rel="stylesheet">
<link href="./css/letter.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="js/jquery-3.5.1.min.js"></script>
 <!-- import Vue before Element -->
 <script src="js/vue.min.js"></script>
 <!-- import JavaScript -->
 <script src="js/element-ui/index.js"></script>
    <link href="./css/element-ui/index.css" rel="stylesheet">

 <!-- <script src="js/letter.js"></script> -->

<!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet" type="text/css" >
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
<![endif]-->
<!--[if lte IE 6]><meta http-equiv="refresh" content="0;url=IE6/IE6.html"><![endif]-->
<link href="favicon.ico" rel="SHORTCUT ICON">
    <script src="./js/layer.js"></script>
<style type="text/css">
  .messagecountdiv{float: right;margin-top: -20px;}
  .messagecount{float: right;width:25px; height:25px; border-radius:50%;-moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; -webkit-border-radius:50%;background-color:red;line-height: 25px;text-align: center;color:white;font-weight: bolder;}
  .load-message{
    text-align: center;
    margin: 10px auto;
    max-width: 50%;
    color: #b2b2b2;
    font-size: 12px;
}
.load-message{
    color: #346dc6;
    cursor: pointer;
}
.indexbgc{
color: chartreuse;
}
.unindexbgc{
color:black;
}
.dialogClass .el-dialog__body {
  color: #606266;
  font-size: 14px;
  background:#f9f9f9;
  padding: 0px 0px;
}
.dialogClass .el-dialog__footer {
  text-align: right;
}
.dialogClass .el-dialog__header{
  padding: 0px 0px 0px;

}
.dialogClass .el-dialog__headerbtn{
  top:0px;
  right: 10px;
}

  </style>
<title>17素材·私厨 - 为你推荐遍布全球最新鲜，最与众不同的顶级生活方式</title>
</head>
<body>
  <div id="app">
    <el-dialog :visible.sync="visible" class="dialogClass" >
       <!-- 聊天主窗口 -->
   <div class="box">
      <div class="box-hd">
        <!-- <div id="chatName"></div> -->
        <!-- <h3>群聊(<span id="userCount">99</span>)</h3> -->
        <h3 id="chatName" v-model="room">{{room}}</h3>
      </div>
      <div class="box-bd" >
          <div class="load-message" @click="loadMessage()"><span class="iconfont icon-time"></span>加载更多</div>

        <div  v-for="item in messagearr">
       <div class="system" v-if="item.flag">
          <p class="message_system">
            <span class="content">{{item.date}}</span>
          </p>
        </div>

        
        <div class="message-box">
            <div :class="item.target">
                <div class="nickname" v-if="item.target==reception">{{room}}</div>

              <img v-if="item.target==reception" :src="roomusertk" alt="" class="avatar">
              <img v-else :src="userTx" alt="" class="avatar">
              <div class="lettercontent">
                <div class="bubble">
                  <div class="bubble_cont" v-html="item.content">{{item.content}}</div>
                </div>
              </div>
            </div>
          </div>

        </div>


      
        
      </div>
      <!-- 聊天窗口底部 -->
      <div class="box-ft">
             
        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="message-box-system-menu">
                <div class="message-box-system-menu-enjoy" @MouseOver="showEnjoy(1)" @MouseOut="showEnjoy(0)">
                    <img src="https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/src/chatroom/icon/menu-enjoy.png"
                         alt="发送表情" class="message-box-system-menu-icon">
                    <!--表情选择-->
                    <div class="enjoy-view-position">
                        <div class="enjoy-view">
                            <table width="100%" height="100%" id="enjoyViewTable"></table>
                        </div>
                    </div>
                </div>
                <div class="message-box-system-menu-img">
                   
                    <img src="https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/src/chatroom/icon/menu-img.png"
                         alt="发送图片" class="message-box-system-menu-icon">
                    <input id="upload" type="file" @change="upImg()" accept="image/*"name="file" title="选择发送图片"/>
                    
                </div>

            </div>
          <!-- <a class="face" href="" title="表情"></a>
           <a class="screen-cut" href="javascript:;" title="暂不支持截屏"></a> -->
          <!-- <a href="javascript:;" title="图片" class="file">
            <label for="file"></label><input type="file" id="file" style="display:none;"> 
          </a> -->
          <div class="message-box-system-message">
              <textarea type="text" class="message-box-system-message-c" v-model="messagecontent">{{messagecontent}}</textarea>
          </div>
          <div class="message-box-system-message-send">
              <span>按下Enter换行、Ctrl+Enter发送</span>
              <button class="btn-send" @click="sendMessage()">发送</button>
          </div>
        </div> 

     
    </div>
  </div>
      
    </el-dialog>
 
    <div class="head">
      <div class="wrap clearfix">
        <a href="index.html" class="logo indent">logo</a>
        <div class="headr fr">
          <form action="active.html" method="post" class="headsearch">
            <label class="label">
              <input type="text" value="" name="" class="key">
              <span class="text">搜索地址、名称、时间等</span>
            </label>
            <button type="submit" class="button btn-search">&#xe628;</button>
          </form>
          <a href="#"><em><img src="images/sb.png"></em>  &nbsp;&nbsp;发布我的饭局</a>
          <div class="user">
            <span class="clearfix"><span class="userimg">
              <template v-if="userTx!=null">
                  <img :src=userTx>
              </template>>
              <template v-else>
                  <img src="upload/img12.png">
              </template></span>
             <a href="javascript:;" class="fr" style="     width: 80px; float: right;text-overflow : ellipsis;overflow: hidden;white-space: nowrap;display: block; ">{{userId}}<em>&#xe607;</em></a></span>
              <ul class="topslide">
                  <li><em>&#xe627;</em><a href="mem.html">个人设置</a></li>
                  <li><em>&#xe63d;</em><a href="Message.html">消息中心</a></li>
                  <li><em>&#xe63c;</em><a href="Dinner.html">饭局管理</a></li>
                  <li><em>&#xe63e;</em><a href="fans.html">我的好友</a></li>
                  <li><em>&#xe61b;</em><a href="My_Messages.html" >我的留言</a></li>
                  <li  onclick="exit()"><em>&#xe611;</em><a href="#">退出</a></li>
              </ul>
          </div>
        </div>
      </div>
    </div>

<div class="mem-banner" style="background-image:url(upload/img11.jpg);"></div>


<div class="memwrap wrap clearfix">
  <div class="section fl">
    <div class="location tr">
      <span class="f12 fl" v-if="caretofans==0"><em class="myfont">&#xe627;</em> 关注数量<b class="o f14"> {{carecount}}</b> 人</span>
      <span class="f12 fl" v-if="caretofans==1"><em class="myfont">&#xe627;</em> 粉丝数量<b class="o f14"> {{carecount}}</b> 人</span>

      <a href="fans.html" :class="caretofans==0?'current':''"  @click="ToCare()">我的关注</a><a href="#" :class="caretofans==1?'current':'' " @click="ToFans()">我的粉丝</a></div>
    
    <ul class="fans">
       <li v-for="(item,i) in carelist">
            <a href="#" class="img"><img :src=item.headPortrait></a>
           <div class="fansinfo">
              <div class="header"><a href="#">{{item.nickname}}</a><em :class="item.sex">女</em><div class="messagecountdiv" v-if="notification[item.nickname]>0" > <div class="messagecount" v-model="notification[item.nickname]">{{notification[item.nickname]}}</div></div></div> 
              {{item.info}}
            </div> 
            <div class="Status" v-if="item.flag==0">
              <a href="#" class="Pull">拉黑名单</a><a href="javascript:;" class="follow-btn"><span class="concerns"><em class="myfont">&#xe610;</em>已关注</span><span class="Unfollow" :number="i" :nickname="item.nickname" @click="CancelCare($event)">取消关注</span></a> <a @click="chagevisible($event);" href="javascript:;" :zk="item.nickname" :tx="item.headPortrait" class="Private-letter"><em class="myfont">&#xe63f;</em>私信   </a>
            </div>

            <div class="Status" v-if="item.flag==1">
                <a href="#" class="Pull">拉黑名单</a><a href="javascript:;" class="follow-btn"><span class="concerns"><em class="myfont">&#xe610;</em>未关注</span><span class="Unfollow" :number="i" :nickname="item.nickname" @click="CareFans($event)">关注</span></a> <a @click="chagevisible($event);" href="javascript:;" :zk="item.nickname" :tx="item.headPortrait" class="Private-letter"><em class="myfont">&#xe63f;</em>私信   </a>
              </div>

              <div class="Status" v-if="item.flag==2">
                  <a href="#" class="Pull">拉黑名单</a><a href="javascript:;" class="follow-btn"><span class="concerns"><em class="myfont">&#xe610;</em>互相关注</span><span class="Unfollow" :number="i" :nickname="item.nickname" @click="CancelCare($event)">取消关注</span></a> <a @click="chagevisible($event);" href="javascript:;" :zk="item.nickname" :tx="item.headPortrait" class="Private-letter"><em class="myfont">&#xe63f;</em>私信   </a>
                </div>
         
          </li> 

    </ul>
    <!--Pagination-->

    <div class="page mt20 clearfix" v-if="pagecount<5"><a href="#" class="prev" @click="upPage()"><em></em>上一页</a>
      <a href="#" v-for="index of pagecount-0" :number="index"  @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'" >{{index}}</a>
      <!-- <a href="#">2</a><a href="#">3</a><a href="#">4</a>...<a href="#">23</a> -->
      <a href="#" class="next" @click="nextPage()">下一页<em></em></a>
    </div>

    <div class="page mt20 clearfix" v-else-if="nowpage<=3"><a href="#" class="prev"  @click="upPage()"><em></em>上一页</a>
      <a  v-for="index of pageindex-0" :number="index"  @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'"> {{index}}</a>
      ...<a href="#"  @click="changepage($event)" :number="pagecount" :class="nowpage==pagecount?'indexbgc':'unindexbgc'">{{pagecount}}</a>
      <a href="#" class="next" @click="nextPage()"  >下一页<em></em></a>
    </div>

    <div class="page mt20 clearfix" v-else-if="(nowpage>3)&&(pagecount-2>=nowpage)"><a href="#" class="prev"  @click="upPage()"><em></em>上一页</a>
      <a href="#"   @click="changepage($event)" number="1" :class="nowpage==1?'indexbgc':'unindexbgc'">1</a>
     ...
      <a href="#" v-for="index of nowpage-0+1" v-if="index>=nowpage-0-1" :number="index"   @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'">{{index}}</a>
     ...<a href="#"   @click="changepage($event)" :number="pagecount" :class="nowpage==pagecount?'indexbgc':'unindexbgc'">{{pagecount}}</a>
      <a href="#" class="next" @click="nextPage()">下一页<em></em></a>
    </div> 

    <div class="page mt20 clearfix" v-else><a href="#" class="prev" @click="upPage()"><em></em>上一页</a>
      <a href="#"   @click="changepage($event)" number="1" :class="nowpage==1?'indexbgc':'unindexbgc'">1</span></a>
     ...
      <a href="#" v-for="index of pagecount-0" v-if="index>=pagecount-2" :number="index"   @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'">{{index}}</a>
      <a href="#" class="next" @click="nextPage()">下一页<em></em></a>
    </div> 

  </div>
  
  <div class="aside fr">
    <div class="pd15">
      <div class="userimg img">
          <template v-if="userTx!=null">
              <img width="100%" :src=userTx>
          </template>
          <template v-else>
              <img src="upload/img12.png">
          </template>
      </div>
      <div class="user-level tc">{{userId}} <em></em><em></em></div>
<!--              <div class="tc"><a href="javascript:;" class="button btn-control btn-follow"> + 关注</a><a href="javascript:;" class="button btn-control btn-sent"><em class="myfont f18">&#xe63f;</em> 私信</a></div>-->
      <div class="Praise tc" style="margin-top: -30px">
<!--                  <em>&#xe61d;</em><em>&#xe61d;</em><em>&#xe61d;</em>-->
         <br> {{zy}} <br>{{city}}
      </div>

      <div class="txtwrap tc"><h1 class="f16">个人简介</h1>{{info}}</div>
      <h1 class="f16">关注 {{carezh.length}}</h1>
        <ul class="followlist clearfix" style="height: 130px;overflow-y: auto;cursor: pointer" >
            <template v-for="(item,index) in carezh">
                <el-tooltip class="item" effect="dark" :content=item.nc placement="top-start" >
                    <li><img @click="toMessage(item)" :src="item.tx"  ></li>
                </el-tooltip>
            </template>
        </ul>
        <h1 class="f16">粉丝 {{fanszh.length}}</h1>
        <ul class="followlist bd0 clearfix" style="height: 130px;overflow-y: auto;cursor: pointer"  >
            <template v-for="(item,index) in fanszh">
                <el-tooltip class="item" effect="dark" :content=item.nc placement="top-start">
                    <li><img @click="toMessage(item)" :src="item.tx"></li>
                </el-tooltip>
            </template>
        </ul>
    </div>
  </div>
  
</div>
</div>
  <script src="../yuefan_web/js/overall.js"></script>
<script src="js/jquery.js"></script>
<script src="js/Action.js"></script>

<script src="js/chosen.jquery.js"></script>
<script type="text/javascript">

//用户消息队列
const userMap={};
function scrollIntoView () {
  // 当前元素的底部滚动到可视区
  // $('.box-bd').children(':last').get(0).scrollIntoView(false)
  setTimeout(function(){$(".box-bd").scrollTop($(".box-bd")[0].scrollHeight)},300);
 
  console.log("滑到底步")
}

//时间格式化
Date.prototype.format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
//获取光标位置
function getPursorPositionIndex(){
    var oTxt1 = document.getElementsByClassName("message-box-system-message-c")[0];
    try {
        var cursurPosition=-1;
        if(oTxt1.selectionStart){//非IE浏览器e799bee5baa6e997aee7ad94e59b9ee7ad9431333330333630
            cursurPosition= oTxt1.selectionStart;
        }else{//IE
            var range = document.selection.createRange();
            range.moveStart("character",-oTxt1.value.length);
            cursurPosition=range.text.length;
        }
    }catch (e) {

    }
    return cursurPosition;
}
//获取光标选中的内容
function getSelectionText() {
    if(window.getSelection) {
        return window.getSelection().toString();
    } else if(document.selection && document.selection.createRange) {
        return document.selection.createRange().text;
    }
    return '';
}

 let vue=new Vue({
     el: '#app',
     data: {
       caretofans:0,
       senduser:"my",
       reception:"other",
      visible: false ,
      room:"",
      roomusertk:"",
      websock: null,
      messagecontent:"",
      userId:"浪子",
    //userId:"楠黎",
      userTx:"",
      messagearr:[],
      lastdate:0,
      Enjoy:true,
      img:"",
      imgname:"",
      notification:{},
      carelist:[],
      carecount:0,
      nowpage:1,
      pagecount:0,
      pageindex:4,
      limitcount:3,
       //关注的账号
       carezh:[],
       //账号的粉丝
       fanszh:[],
       zy:"",
       city:"",
       info:'',

     },
     created() {
      let userinfo=sessionStorage.getItem("userinfo");
      let userobj=JSON.parse(userinfo);
      this.userId=userobj.nc;
      this.userTx=userobj.tx;
      this.zy=userobj.zy;
      this.city=userobj.city;
      this.info=userobj.info;
      this.initWebSocket();
      this.getFansandCare();
    },
    mounted() {
     this.ulogin()
     this.getCare(this.userId,0,this.limitcount,0);
     this.keyCodeForEvent();
     this.getCareCount(this.userId);
    },
     methods: {
         //跳转其他用户
         toMessage(info){
             sessionStorage.setItem("ToMessage",JSON.stringify(info))
             window.location.href="My_Messages.html"
         },
         //判断是否登录
         ulogin(){
             //获取当前用户
             let zh = sessionStorage.getItem("zh")
             //判断是否登录
             if(zh==null){

                 this.$alert('请先登录！', '温馨提示', {
                     confirmButtonText: '确定',
                     callback: action => {
                         this.$message({
                             type: 'info',
                             message: `action: ${ action }`
                         });
                         window.location.href="./login.html"
                     }
                 });
             }

         },
         //加载关注和粉丝数据
         getFansandCare:async function(){
             let allinfo = await this.allinfo()
             let zh = sessionStorage.getItem("zh")
             //调用关注表的内容
             let careinfo = await this.careInfo()
             let caremsg = careinfo.data
             //获取
             for (let i=0;i<caremsg.length;i++){
                 for (let j=0;j<allinfo.length;j++){
                     //关注的账号
                     if(caremsg[i].user_zh==zh){
                         if(caremsg[i].care_zh==allinfo[j].zh){
                             this.carezh.push(allinfo[j])
                         }
                     }
                     //粉丝的账号
                     if(caremsg[i].care_zh==zh){
                         if(caremsg[i].user_zh==allinfo[j].zh){
                             this.fanszh.push(allinfo[j])
                         }
                     }
                 }
             }

         },
//关注表的信息
         careInfo:async function(){
             let msg
             await $.post('http://localhost:8080/CareServlet',{ },function (data) {
                 msg=data
             },'JSON')
             return msg
         },
         allinfo:async function() {
             let msg=null
             await $.post("http://localhost:8080/UserServlet",function (data){
                 msg=data.data
             },"JSON")
             return msg
         },
       ToCare:function(){
         this.caretofans=0;
         this.nowpage=1;
         this.getCareCount(this.userId);
       },
       ToFans:function(){
        this.caretofans=1;
         this.nowpage=1;
         this.getFansCount(this.userId);
},
      
      changepage:function(e){
        console.log(e)
        this.nowpage=e.target.getAttribute('number');
        e.target.style;

      

      },
      nextPage:function(){
       
        if(this.nowpage<this.pagecount){
   
        this.nowpage=parseInt(this.nowpage)+1;
       
        }
        else{
     
        this.nowpage=1;
        }
      },
      upPage:function(){
        if(this.nowpage!=1)
        this.nowpage=this.nowpage-1;
      },
       //模拟组合键触发函数
keyCodeForEvent:function(){
  let self = this;
  let code = 0;
  let code2 = 0;
  document.onkeydown = function(e){
    
    let evn = e || event ;
    let key = evn.keyCode || evn.which || evn.charCode ;
    console.log("验证码"+key)
    if(key === 17){
      code = 1 ;
    }
    if(key === 13){
      code2 = 1;
    }
    if(code === 1 && code2 === 1&&vue.visible){
      console.log(666)
        vue.sendMessage();
      code = 0;
      code2 = 0;
    }
  }
  document.onkeyup = function(e){
    if (e.keyCode === 17) {
      code = 0;
    }
    if (e.keyCode === 13) {
      code2 = 0;
    }
  }
},

  //     private int id;
	// //发送用户id
	// private String sendUserId;
	// //接收用户id
	// private String receiveUserId;
	// // 信息类型 图片1/文本0
	// private int msgType;
	// // 信息内容 图片地址/文本内容
	// private String msgContent;
	// //发送时间
	// private Date sendTime;
	// //私信表标志 已读1/未读0
	// private int sign;
	// //状态码
  // private long code;
      addMessage(target,contenttext){
        console.log("第一次")
        let date=new Date();
        let room=this.room;
        let count=date.getTime()-this.lastdate
        this.lastdate=date.getTime()
        let flag=false;
        console.log("时间差"+count)
        if(count>30000){
          flag=true;
        }
       let datestring=date.format("yyyy-MM-dd hh:mm:ss");
        let messageobj={
          target:target,
          content:contenttext,
          date:datestring,
          flag:flag
        }
        
        this.messagearr.push(messageobj)
        userMap[room].push(messageobj);
        scrollIntoView ()
       
       
      },
      sendMessage:function(){
        if(this.img!=""||this.messagecontent!=""){
        var content="";
        if(this.img!=""){
          content=this.messagecontent.replace(this.imgname,this.img)
     
        }else{
          content=this.messagecontent;
        }
   
        
        let obj={
          sendUserId:this.userId,
          receiveUserId:this.room,
          msgType:0,
          msgContent:content
        }
        let objbody={code:0,data:obj};
        console.log(JSON.stringify(objbody));
        this.websocketSend(JSON.stringify(objbody));
        this.addMessage("my",content);
        this.messagecontent=""
        this.img=""
        this.imgname=""
      }
      },
       chagevisible:function(e){
        // previousSbiling.firstChild.firstChild.innerText;
        this.room=e.target.getAttribute('zk');
        this.roomusertk=e.target.getAttribute('tx');
        console.log(this.room);
        
        let key=this.room;
        //打开聊天窗口通知清零
        this.notification[key]=0;
         if(!userMap[key]){
           userMap[key]=this.getLetter(this.userId,key,0,10);
           console.log("创建"+key)
         }
         this.visible=true;
         //将消息数组转接到用户房间接口
         this.messagearr=JSON.parse(JSON.stringify(userMap[key]))
        
         scrollIntoView ()
       },
      //  String hostuser = request.getParameter("hostuser");
      //   String clientuser = request.getParameter("clientuser");
      //   String start = request.getParameter("start");
      //   String length = request.getParameter("length");
       getLetter:function(hostuser,clientuser,start,length){
         let list=[];
         console.log(hostuser,clientuser,start,length)
         $.ajax({
           type:"get",
           url:"http://127.0.0.1:8080/letterlimit",
           data:{"hostuser":hostuser,"clientuser":clientuser,"start":start,"length":length},
           dataType:"json",
           async:false,
           success:function(data){
             console.log(data);
             if(data!="null"){
              list=data;
             }
             
           }
         })
            return list;


       },
       //获取关注的用户或粉丝
       getCare:function(userid,start,length,flag){
        let list=[];
         $.ajax({
           type:"get",
           url:"http://127.0.0.1:8080/limitCare",
           data:{"userid":userid,"start":start,"length":length,"flag":flag},
           dataType:"json",
           async:false,
           success:function(data){
             console.log("关注"+data)
             data=JSON.parse(data)
             if(data["code"]==0){
              list=data.data;
             }
             
           }
         })
         this.carelist=list;
         console.log(this.carelist)

       },
       getCareCount:function(userid){
        let count=0;
         $.ajax({
           type:"get",
           url:"http://127.0.0.1:8080/countcare",
           data:{"user":userid},
           dataType:"json",
           async:false,
           success:function(data){
             data=JSON.parse(data)
             if(data["code"]==0){
              count=data.data;
             }
             
           }
         })
         console.log(this.carecount)
         this.carecount=count;
         console.log(this.carecount)
         let dev=this.limitcount;
     
         if(count%dev!=0){
          this.pagecount=parseInt(count/dev+1)
         }else{
           this.pagecount=count/dev
         }
        // this.pagecount=count
         console.log("page"+this.pagecount)
       },

       getFansCount:function(userid){
        let count=0;
         $.ajax({
           type:"get",
           url:"http://127.0.0.1:8080/countfans",
           data:{"user":userid},
           dataType:"json",
           async:false,
           success:function(data){
             data=JSON.parse(data)
             if(data["code"]==0){
              count=data.data;
             }
             
           }
         })
         console.log(this.carecount)
         this.carecount=count;
         console.log(this.carecount)
         let dev=this.limitcount;
     
         if(count%dev!=0){
          this.pagecount=parseInt(count/dev+1)
         }else{
           this.pagecount=count/dev
         }
        // this.pagecount=count
         console.log("page"+this.pagecount)
       },
              //取消关注
CancelCare:function(e){
 let cancelUser=e.target.getAttribute("nickname");
 let number=e.target.getAttribute("number");
         $.ajax({
           type:"get",
           url:"http://127.0.0.1:8080/cancelcare",
           data:{"hostuser":vue.userId,"canceluser":cancelUser},
           dataType:"json",
           async:false,
           success:function(data){
             data=JSON.parse(data)
             if(data.data!=-1){
              vue.carelist.splice(number,1)
              vue.getCareCount(this.userId);
             }
             
           }
         })
         this.getCare(this.userId,(this.nowpage-1)*parseInt(this.limitcount),this.limitcount,this.caretofans);

       },

       CareFans:function(e){
        let cancelUser=e.target.getAttribute("nickname");
        let number=e.target.getAttribute("number");
         $.ajax({
           type:"get",
           url:"http://127.0.0.1:8080/carefans",
           data:{"hostuser":vue.userId,"fans":cancelUser},
           dataType:"json",
           async:false,
           success:function(data){
             data=JSON.parse(data)
             if(data.data!=-1){
               for(key in vue.carelist){
                 if(key["nickname"]==cancelUser){
                   ket["flag"]=2;
                 }

               }
              // vue.getCareCount('楠黎');
              
            
             }
             
           }
         })
         this.getCare(this.userId,(this.nowpage-1)*parseInt(this.limitcount),this.limitcount,this.caretofans);

       },
       //加载聊天记录
       loadMessage:function(){
        let arr=this.getLetter(this.userId,this.room,0,this.messagearr.length+5);
        if(arr.length!=0){
          userMap[this.room]=arr;
          this.messagearr=JSON.parse(JSON.stringify(arr));
        }


       },
       insertMessageContent:function(newMessage){
        // var messageBoxSystemMessageC = document.getElementsByClassName("message-box-system-message-c")[0]
                var cursorPositionIndex = getPursorPositionIndex()
                var selectionText = getSelectionText()
                var oldValue = this.messagecontent
                
                if (this.messagecontent!="") {
                  console.log(2);
                    //选中有内容 内容替换表情
                    if (selectionText){
                      console.log(3);
                        //截取光标后的内容
                        this.messagecontent = oldValue.substring(0,cursorPositionIndex) + oldValue.substring(cursorPositionIndex,oldValue.length).replace(selectionText,newMessage)
                    }
                    else if (cursorPositionIndex!==undefined){//没选内容 插入表情
                      this.messagecontent = oldValue.substring(0,cursorPositionIndex) + newMessage + oldValue.substring(cursorPositionIndex,oldValue.length)
                    }
                }else {
                  console.log(4);
                  vue.messagecontent = oldValue + newMessage
                  console.log(this.messagecontent)
                }
       },
       upImg:function () {
         console.log(222)
        var files=document.getElementById("upload").files;
        this.imgname="[图片"+files[0].name+"]"
        this.insertMessageContent(this.imgname)
        var formdata=new FormData();
        formdata.append("file",files[0]);
      $.ajax({
        url: "http://81.68.126.120:8089/uploadapi/",
        data: formdata,
        type: "post",
        //cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        success: function (result) {
          var image=""
          if(result.code==0){
            image ="<img src=\""+result.data+"\" style=\"display:block\">"
          }else{
            image=" <img src=\""+result.message+"\" style=\"display:block\" >"
          }
          vue.img=image;
        //   vue.addMessage("my",image)
        //   let obj={
        //   sendUserId:vue.userId,
        //   receiveUserId:vue.room,
        //   msgType:1,
        //   msgContent:image
        // }
        // let objbody={code:0,data:obj};
        // console.log(JSON.stringify(objbody));
        // vue.websocketSend(JSON.stringify(objbody));
        },
        error: function(e){
          console.log(e)
        }
    })
},
       initWebSocket: function () {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        // console.log("调用了链接websock  ，获取的用户id为   ："+store.getters.userInfo.id)
        var userId =this.userId;
        // var userId ="楠黎";

        // var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
        var url="ws://127.0.0.1:8088/websocket/" + userId
        console.log(url);
        this.websock = new WebSocket(url);
        this.websock.onopen = this.websocketOnopen;
        this.websock.onerror = this.websocketOnerror;
        this.websock.onmessage = this.websocketOnmessage;
        this.websock.onclose = this.websocketOnclose;
      },
      websocketOnopen: function () {
        console.log("WebSocket连接成功");
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnerror: function (e) {
        console.log("WebSocket连接发生错误");
        this.reconnect();
      },
      websocketOnmessage: function (e) {
      	//  console.log('监听关闭' + e)
        // console.log("-----接收消息-------",e.data);
        console.log(e.data);
        if(e.data!=""){
          console.log(1);
        let data=JSON.parse(e.data);
        let json=JSON.parse(data);
        console.log(2,json["code"]);
        if(json.code==0){//当前聊天窗口消息
          console.log(3);
          console.log("消息"+json.data);
          this.addMessage("other",json.data.msgContent);
        }else if(json.code==2){//非当前聊天窗口消息通知加一
          console.log(4);
          console.log("消息"+json.data);
          //有消息进入通知加一
          this.notification[json.data.sendUserId]=this.notification[json.data.sendUserId]+1;
          //将消息存入关注用户信息列表
          if(!userMap[json.data.sendUserId]){//用户不存在的情况
            
            console.log("通知1")
            userMap[json.data.sendUserId]=this.getLetter(this.userId,json.data.sendUserId,0,10);
            console.log("2创建"+json.data.sendUserId)

          }else{//用户存在
            let date=new Date().format("yyyy-MM-dd hh:mm:ss");

            let messageobj={
          target:"other",
          content:json.data.msgContent,
          date:date,
          flag:true
        }
            userMap[json.data.sendUserId].push(messageobj);
          }

        }else if(json.code==3){//进入页面初始化未读信息
          for(key in json.data){
            this.$set(this.notification,key,json.data[key])
          }
        }
      }
      },
      websocketOnclose: function (e) {
        console.log("connection closed (" + e.code + ")");
        this.reconnect();
      },
      websocketSend(text) { // 数据发送
        try {
          this.websock.send(text);
        } catch (err) {
          console.log("send failed (" + err.code + ")");
        }
      },
      reconnect() {
        var that = this;
        if(that.lockReconnect) return;
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },
      initEnjoy: function(){
    var enjoy = ["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","☺","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠","😈","👿","👹","👺","💀","👻","👽","👦","👧","👨","👩","👴","👵","👶","👱","👮","👲","👳","👷","👸","💂","🎅","👰","👼","💆","💇","🙍","🙎","🙅","🙆","💁","🙋","🙇","🙌","🙏","👤","👥","🚶","🏃","👯","💃","👫","👬","👭","💏","💑","👪","💪","👈","👉","☝","👆","👇","✌","✋","👌","👍","👎","✊","👊","👋","👏","👐","✍","👣","👀","👂","👃","👅","👄","💋","👓","👔","👕","👖","👗","👘","👙","👚","👛","👜","👝","🎒","💼","👞","👟","👠","👡","👢","👑","👒","🎩","🎓","💄","💅","💍","🌂","🌹","🍀","🍎","💰","📱","🌙","🍁","🍂","🍃","🌷","💎","🔪","🔫","🏀","⚽","⚡","👄","👍","🔥"]
    var enjoyDom = document.createDocumentFragment()
    var tr = document.createElement("tr");
    for (var i = 1; i <= enjoy.length; i++) {
        (function (i) {
            var td = document.createElement("td");
            td.onmousedown=function () {
              console.log(1);
                var messageBoxSystemMessageC = document.getElementsByClassName("message-box-system-message-c")[0]
                var cursorPositionIndex = getPursorPositionIndex()
                var selectionText = getSelectionText()
                var oldValue = vue.messagecontent
                
                if (messageBoxSystemMessageC === document.activeElement) {
                  console.log(2);
                    //选中有内容 内容替换表情
                    if (selectionText){
                      console.log(3);
                        //截取光标后的内容
                        vue.messagecontent = oldValue.substring(0,cursorPositionIndex) + oldValue.substring(cursorPositionIndex,oldValue.length).replace(selectionText,enjoy[i-1])
                    }
                    else if (cursorPositionIndex!==undefined){//没选内容 插入表情
                      vue.messagecontent = oldValue.substring(0,cursorPositionIndex) + enjoy[i-1] + oldValue.substring(cursorPositionIndex,oldValue.length)
                    }
                }else {
                  console.log(4);
                  vue.messagecontent = oldValue + enjoy[i-1]
                  console.log(vue.messagecontent)
                }
                document.getElementsByClassName("enjoy-view")[0].style.display = "none"
                console.log(vue.messagecontent)
            }
            td.innerText = enjoy[i-1]
            tr.appendChild(td)
            if (i%12===0) {
                enjoyDom.appendChild(tr)
                tr = document.createElement("tr");
            }
        })(i)
    }
    enjoyDom.appendChild(tr)
    document.getElementById("enjoyViewTable").appendChild(enjoyDom)
},
showEnjoy:function(n) {
    if(this.Enjoy){
    this.Enjoy=false;
    this.initEnjoy();
    }
    document.getElementsByClassName("enjoy-view")[0].style.display = ["none","inline-block"][n]
}
       
     },
     watch: {

       visible:function(newVal, oldVal){
         if(newVal){
          console.log("打开窗口")
          let obj={code:1,data:this.room};
          this.websocketSend(JSON.stringify(obj));
         }else{
          console.log("关闭窗口")
          this.messagecontent=""
          this.img=""
          this.imgname=""
          let obj={code:1,data:""};
          this.websocketSend(JSON.stringify(obj));
         }
       
       },
       messagecontent:function(newVal, oldVal){
        console.log("新的"+newVal);
       
       },
       nowpage:function(newVal, oldVal){
        //  alert((newVal-1)*this.limitcount)
        this.getCare(this.userId,(newVal-1)*parseInt(this.limitcount),this.limitcount,this.caretofans);
       
       },
     },
   })

$(document).ready(function($){
	//select 样式美化
	 var config = {
		'.chosen-select-no-single' : {disable_search_threshold:10}
	}
	for (var selector in config) {
		$(selector).chosen(config[selector]);
	}
});

</script>
</body>
</html>